@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --blur: blur(10px);
    --icon-color: none;
    --icon-p-b-size: 32px;
    --icon-size: 24px;
    --icon-margin: 4px;
    --item-height: 24px;
    --item-icon: 24px;
    --item-icon-margin: 0;
    --zest-index: 0;
    --x-x-bar-w: 16px;
    --x-x-handle-d: block;
    --x-x-handle-w: 8px;
    --x-x-handle-o: calc(50% - var(--x-x-handle-w) / 2);
    --x-x-handle-o2: calc(-0.5 * var(--x-x-handle-w));
    --zoom: 1;
}

.icon {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    filter: var(--icon-color);
    user-select: none;
    -webkit-user-drag: none;
}

.icon-m {
    @apply h-8 w-8 relative cursor-pointer;
}
.icon-m > .icon {
    @apply h-6 w-6 top-1 left-1;
}

html {
    height: 100%;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body > #main {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content auto;
}

.no_run {
    cursor: not-allowed !important;
    background-color: transparent;
}

#text_output {
    grid-template-columns: min-content min-content;
    grid-template-rows: min-content auto;
}
#text_output > textarea {
    grid-area: 2 / 1 / 3 / 4;
}

#img_view {
    @apply flex flex-col gap-2 items-center;
    grid-area: 2 / 1 / 3 / 3;
}

.img_el {
    @apply relative w-3/4 shadow rounded;
}
.img_el > img {
    @apply w-full;
}
.img_el > div {
    @apply absolute top-0 left-0 w-full h-full;
}
.img_el > div > p {
    @apply absolute text-justify text-transparent;
    text-align-last: justify;
}

.other_software {
    @apply flex flex-col items-center p-8;
}
.other_software img {
    @apply w-40;
}

@media all and (orientation: portrait) {
    body > #main {
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto;
    }
    #drop {
        @apply h-32;
    }
    #img_view {
        grid-area: 3 / 1 / 4 / 2;
    }
}
